<template>
  <div class="recom_home">
       <!-- 轮播图位置 -->
    <div class="rboqu"  v-show="recomlbo!==[]">
      <el-carousel :interval="4000" type="card" height="260px" >
        <el-carousel-item v-for="(m, index) in recomlbo" :key="index" >
            <img :src="`${m.picUrl}?param600y200`" alt=""  @click="getmusic(m)"  />
            <audio :src="videoid[index]" ref='audio' ></audio>
        </el-carousel-item>
      </el-carousel>
       <!-- 推荐歌单区 -->
       <div class="gedan_top"><h1>推荐歌单</h1></div>
       <div class="gedan_img" v-for="(m,index) in getgedan" :key="index" @click="gotwo(m)">
         
             <i class="iconfont icon-erji" ></i>
             <div class="playcount">{{m.playCount}}</div>
           <img :src="`${m.picUrl}?param230y230`" alt="">
           <span>{{m.name}}</span>
       </div>
      <div style="height:100px;width:800px;float:left">

      </div>
           
    </div>
  </div>
 
</template>

<script>
import { mapState } from "vuex";
export default {
    data(){
        return{
            videoid:[],
           
        }
    },
  mounted() {
    this.$store.dispatch("recomlbo");
    this.$store.dispatch('getgedan')
  },
  // watch:{
  //        recomlbo(){
  //              this.videoid=[]
  //             this.recomlbo.forEach(async(item) =>{
  //            const res = await this.$store.dispatch('getmusic',item.id)  
  //            this.videoid.push(res)})
  //        }
  // },
  computed: {
    ...mapState({
      recomlbo: (state) => {
        return state.user.recomlbo;
      },
      getgedan:(state)=>{
          return state.user.getgedan;
      },
    
    }),
  },
  methods:{
      getmusic(m){   
        console.log(m);
//           let s =0 
//           this.videoid.forEach(item=>{
//               if(s!==m){
//                   this.$refs.audio[s].pause()
//               }
//                s++
//           }) 
//          console.log(this.$refs.audio[m].paused);
// //console.log(this.videoid);
//        if(this.$refs.audio[m].paused){
//           this.$refs.audio[m].play()
//         }else if(!this.$refs.audio[m].paused){
//         this.$refs.audio[m].pause()
//       }
      this.$store.dispatch('getmusiclist',m.id)
       this.$store.dispatch('getmusic',m.id)
  

   


      },
      gotwo(m){
        sessionStorage.setItem('socc',JSON.stringify(m.id))
         sessionStorage.removeItem('plun')
        this.$router.push('/gedantwo')
       
      }
  }
};
</script>

<style lang='less' scoped>
.recom_home {
     margin: 20px 135px;

  height: 100%;
  
  img {
    width: 600px;
    height: 260px;
  }
  .gedan_top{
       margin: 20px 0;
        h1{
              font-size: 20px !important;
        }
  }
  .gedan_img{
      position: relative;
      float: left;
      cursor: pointer;
      width: 230px;
      height: 230px;
      background-color: gray;
      margin-right: 20px;
      margin-bottom: 35px;
      border: 1px solid  #bebfb6;
       img{
           width: 230px;
           height: 230px;
       }
       span{
           font-size:12px ;
           font-weight: 600;
       }
    
       i{
            position: absolute;
            top: 2px;
            right: 64px;
            font-size: 20px;
            color: #ffff;
            margin-right: 10px;
       }
       .playcount{
          position: absolute;
          top: 7px;
          right: 5px;
          font-size: 14px;
            color: #ffff;
       }
  }
}
</style>